<template>
  <el-row>
    <Title :saying="saying">
      <h1 slot="title">{{ msg }}</h1>
    </Title>
    <Information>
      <el-row class="en-row bj">
        <el-row v-show="showBG">
          <canvas @click.once="luck" height="200px" id="mytj"
                  width="200px"></canvas>
        </el-row>
        <el-row>
            <Gossip :showGossips="showGossips"></Gossip>
        </el-row>
      </el-row>
    </Information>
  </el-row>
</template>

<script>
import Information from "./Information.vue";
import Title from "./Title.vue";
import Gossip from "./Gossip.vue";

export default {
  name: "Education",
  data() {
    return {
      msg: "一切随缘",
      saying: "莫问后世成败，但求今生无悔。",
      showGossips:false,
      showBG:true,
    };
  },
  components: { Title, Information,Gossip },
  methods: {
    luck(){
      this.showGossips = true;
      this.showBG = false;
    },
    initCanvas() {
      var mytj = document.getElementById('mytj');
      var mt = mytj.getContext('2d');

      //左边黑色大半圆
      mt.beginPath();
      mt.arc(100, 100, 80, 90 * Math.PI / 180, 270 * Math.PI / 180, false);
      mt.fillStyle = '#000';
      mt.fill();

      //右边白色大半圆
      mt.beginPath();
      mt.arc(100, 100, 80, 270 * Math.PI / 180, 90 * Math.PI / 180, false);
      mt.fillStyle = '#fff';
      mt.fill();

      //左边白色中半圆
      mt.beginPath();
      mt.arc(100, 60, 40, 90 * Math.PI / 180, 270 * Math.PI / 180, false);
      mt.fillStyle = '#fff';
      mt.fill();

      //右边黑色中半圆
      mt.beginPath();
      mt.arc(100, 140, 40, 270 * Math.PI / 180, 90 * Math.PI / 180, false);
      mt.fillStyle = '#000';
      mt.fill();

      //左边黑色小圆
      mt.beginPath();
      mt.arc(100, 60, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
      mt.fillStyle = '#000';
      mt.fill();

      //右边白色小圆
      mt.beginPath();
      mt.arc(100, 140, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
      mt.fillStyle = '#fff';
      mt.fill();
    }
  },
  mounted() {
    // this.education();
    this.initCanvas();
   
  },
};
</script>
<style scoped>
#mytj {
  /*  此样式只会动画添加样式无实际作用*/
  width:250px;
  height: 250px;
  animation:turn 3s linear infinite;
}
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>
